<template>
  <v-container>
    <v-row align="center" justify="center" class="mt-6">
      <v-col cols="12" sm="8" md="7" lg="6">
        <v-card>
          <v-card-title>
            <h4>您的预约信息</h4>
          </v-card-title>
          <v-divider></v-divider>
          <v-list dense>
            <v-list-item>
              <v-list-item-content>预约单编号:</v-list-item-content>
              <v-list-item-content>{{responseData.id}}</v-list-item-content>
            </v-list-item>
            <v-list-item>
              <v-list-item-content>组织名称:</v-list-item-content>
              <v-list-item-content>{{responseData.orgnization}}</v-list-item-content>
            </v-list-item>
            <v-list-item>
              <v-list-item-content>拍摄内容:</v-list-item-content>
              <v-list-item-content>{{responseData.content}}</v-list-item-content>
            </v-list-item>
            <v-list-item>
              <v-list-item-content>所需人数:</v-list-item-content>
              <v-list-item-content>{{responseData.count}}</v-list-item-content>
            </v-list-item>
            <v-list-item>
              <v-list-item-content>拍摄时间:</v-list-item-content>
              <v-list-item-content>{{responseData.time}}</v-list-item-content>
            </v-list-item>
            <v-list-item>
              <v-list-item-content>联系人:</v-list-item-content>
              <v-list-item-content>{{responseData.username}}</v-list-item-content>
            </v-list-item>
            <v-list-item>
              <v-list-item-content>联系方式:</v-list-item-content>
              <v-list-item-content>{{responseData.phone}}</v-list-item-content>
            </v-list-item>
            <v-list-item>
              <v-list-item-content>邮箱地址:</v-list-item-content>
              <v-list-item-content>{{responseData.mail}}</v-list-item-content>
            </v-list-item>
            <v-list-item>
              <v-list-item-content>备注:</v-list-item-content>
              <v-list-item-content>{{responseData.remark}}</v-list-item-content>
            </v-list-item>
          </v-list>
        </v-card>
      </v-col>
    </v-row>
    <v-row align="center" justify="center">
      <v-col cols="12" sm="8" md="7" lg="6">
        <v-card>
          <v-card-title>
            <h4>预约处理状态</h4>
          </v-card-title>
          <v-stepper v-model="e1" vertical>
            <v-stepper-step :complete="e1 > 1" step="1">创建预约</v-stepper-step>
            <v-stepper-content step="1">我们已经收到您的请求，请耐心等待</v-stepper-content>
            <v-stepper-step :complete="e1 > 2" step="2">开始处理</v-stepper-step>
            <v-stepper-content step="2">您的预约已经开始处理，我们会尽快安排拍摄</v-stepper-content>
            <v-stepper-step v-if="accept" :complete="e1 > 2" step="3">已受理</v-stepper-step>
            <v-stepper-step v-if="!accept" :complete="e1 > 2" step="3" :rules="[() => false]">未通过</v-stepper-step>
            <v-stepper-content step="3" v-if="accept">您的预约我们已经安排了相关人员拍摄，如有疑问，请联系{{responseData.linkman}}，或焦点摄影官方QQ：2811591985</v-stepper-content>
            <v-stepper-content step="3" v-if="!accept">很抱歉，由于预约较多且工作安排紧张，我们无法安排足够的人手进行拍摄，再次感谢您选择焦点摄影工作室</v-stepper-content>
          </v-stepper>
        </v-card>
      </v-col>
    </v-row>
    <div class="text-center">
      <v-btn class="mt-3" color="primary" @click="submit()">返回</v-btn>
    </div>
  </v-container>
</template>
<script>
export default {
  data: () => ({
    e1: 3,
    accept: true,
    id: "",
    responseData: {}
  }),
  mounted: function() {
    this.id = this.$route.query.id;
    this.loadData();
  },
  methods: {
    loadData: function() {
      const that = this;
      this.axios
        .get("http://www.hdufocus.cn:8081/reservation/search", {
          params: {
            id: that.id
          }
        })
        .then(function(response) {
          const status = response.status;
          if (status == 200) {
            that.responseData = response.data.data;
            that.e1 = that.responseData.status;
            if (that.e1 == -1) {
              that.accept = false;
              that.e1 = 3;
            }
          }
        });
    },
    submit: function() {
      this.$router.go(-1);
    }
  }
};
</script>